<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="/public/css/login.css">
</head>
<style>
  body{
    background: url(../public/img/bg.png) no-repeat 0px 0px;
    background-size:1600px;
  }
</style>
<body>

<div id="container">
  <h1>注冊</h1>
    <!-- 
      表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈儿）等待服务端的响应结果。 method="post" action="/register"
      表单的同步提交之后，无论服务端响应的是什么，都会直接把响应的结果覆盖掉当前页面。-->
    <form id="register_form">

        <input type="email"  id="email" name="email" placeholder="E-mail" autofocus>
        <input type="text"  id="nickname" name="nickname" placeholder="Nickname">
        <input type="password" id="password" name="password" placeholder="Password">

      <button type="submit" class="orange-btn">注册</button>

      <div id="down_container">
        <span>已有賬戶?<a href="/login">立即登錄</a></span>
      </div>
    </form>
</div>


  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <script>
    $('#register_form').on('submit', function (e) {
      e.preventDefault()
      // console.log('123')
      var formData = $(this).serialize()
      $.ajax({
        url: '/register',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function (data) {
          console.log(data)
          var err_code = data.err_code
          if (err_code === 0) {
            // window.alert('注册成功！')
            // 服务端重定向针对异步请求无效
            window.location.href = '/'
          } else if (err_code === 1) {
            window.alert('邮箱已存在！')
          } else if (err_code === 2) {
            window.alert('昵称已存在！')
          } else if (err_code === 500) {
            window.alert('服务器忙，请稍后重试！')
          }
        }
      })
    })
  </script>
</body>

</html>
